<template>
  <div class="collected-basan-info-wrapper">
    <van-action-sheet
      v-model="isCollectedBasanInfoShow"
      @close="onCollectedBasanInfoClose"
    >
      <div class="container" :style="containerStyle">
        <div class="latlng">
          <span>{{ latlng.lat }}</span>
          <span>{{ latlng.lng }}</span>
        </div>
        <div class="split"></div>
        <van-button class="cancel-btn" type="default" @click="onCancelBtnClick"
          >取消收藏</van-button
        >
      </div>
    </van-action-sheet>
  </div>
</template>
  <script>
import { formatDisplayLatLng } from "@/utils/common.js";
import basanApi from "@/server/basan/basan.js";
import * as CONSTANTS from "@/config/constants.js";
import { PlatformEnv } from "@/config/config.js";

export default {
  name: "CollectedBasanInfo",
  data() {
    return {
      id: null,
      latlng: { lat: null, lng: null },
      isCollectedBasanInfoShow: false,
    };
  },
  computed: {
    containerStyle() {
      return PlatformEnv.isWx ?  { padding: '20px 16px 90px 16px'} : {};
    }
  },
  methods: {
    show(id, latlng) {
      this.id = id;
      this.latlng = formatDisplayLatLng(latlng);
      this.isCollectedBasanInfoShow = true;
    },
    close() {
      this.isCollectedBasanInfoShow = false;
    },
    onCollectedBasanInfoClose() {
      this.$bus.$emit(CONSTANTS.EventEnum.RESETCLICKEDBASAN);
    },
    async onCancelBtnClick() {
      const result = await basanApi.removeCollectedBasan({
        id: this.id
      });
      if (!result.isOk) {
        this.$notify('取消收藏钓点失败');
        return;
      }
      this.$notify({ type: 'success', message: '取消收藏钓点成功' });
      this.$bus.$emit(CONSTANTS.EventEnum.REMOVECOLLECTEDBASAN);
      this.close();
    },
  },
};
</script>
  <style lang="less" scoped>
.collected-basan-info-wrapper {
  .container {
    width: 100%;
    padding: 20px 16px 10px 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .latlng {
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 25px;
      color: rgba(0, 120, 255, 1);
    }

    .split {
      background-color: rgb(247, 247, 247);
      width: 100%;
      height: 2px;
      margin: 10px 0;
    }

    .cancel-btn {
      border-radius: 20px;
      font-size: 15px;
      color: red;
      align-self: flex-end;
    }
  }
}
</style>